<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器的地址栏</title>
</head>
<body>
    <button id="btn">刷新</button>
    <script>
        // 1. 获取浏览器地址栏的 URL
        var url = window.location.href;
        console.log("当前页面的 URL:", url);

        // 2. 获取浏览器地址栏的主机名
        var hostname = window.location.hostname;
        console.log("当前页面的主机名:", hostname);

        // 3. 获取浏览器地址栏的协议
        var protocol = window.location.protocol;
        console.log("当前页面的协议:", protocol);

        // 4. 获取浏览器地址栏的端口号
        var port = window.location.port;
        console.log("当前页面的端口号:", port);

        btn.onclick = function() {
            // 刷新当前页面
            window.location.reload();
        };
    </script>
</body>
</html>